<template>
	<view class="container" @click="showType=false">
		<view class="top_title">
			<view class="name" :class="selectItem=='car'?'active_name':''" @click.stop="selectOne('car')">
				{{activeName}}
				<image src="../../static/img/yellowDown.png" mode="" class="arrow_down" v-if="showType"></image>
				<image src="../../static/img/arrowDown.png" mode="" class="arrow_down" v-else></image>
			</view>
			<view class="name" :class="selectItem=='job'?'active_name':''" @click.stop="selectOne('job')">
				实时用工
			</view>
			<view class="car-list-box" v-show="showType">
				<view class="list" :class="{'active':active == 0}">全部</view>
				<view class="list" v-for="(item,index) in carTypeList" :key="index" :class="{'active':active == item.id}" @click="chooseSelect(index,item.id)">{{item.name}}</view>
			</view>
		</view>
		<view class="" v-if="selectItem=='job'">
			<view class="employ_part" v-for="(item,index) in employList" :key="index" @click="goJobDetail(item.id)">
				<view class="left">
					<view class="name">
						{{item.title}}
					</view>
					<view class="distance_address">
						{{item.city}} &nbsp;&nbsp;{{item.address}}
					</view>
					<view class="types">
						<view class="type_item" v-for="(type,i) in item.positionLabel.split(',')" :key="i">
							{{type}}
						</view>
					</view>
					<view class="company_person">
						<image :src="item.avtar" v-if="item.avtar"></image>
						<text>{{item.anthor}} &nbsp;|&nbsp;招聘者</text>
					</view>
				</view>
				<view class="right">
					<view class="distance_address">
						{{item.positionChild}}
					</view>
					<view class="money">
						{{item.salary}}k/月
					</view>
					<view class="go_rob">
						抢单
					</view>
				</view>
			</view>

		</view>
		<view class="" v-else>
			<view class="car_list" v-for="(option,index) in carList" :key="index" @click="goDetail(option.id)">
				<view class="car_name">
					{{option.leaveCity}}{{option.leaveArea}} - {{option.leaveCity}}{{option.goArea}}
				</view>
				<view class="car_time">
					{{option.leaveTime}}
				</view>
				<view class="car_type_list">
					<view class="car_types" v-if="option.number != ''">{{option.number}}</view>
					<view class="car_types" v-if="option.goodsType != ''">{{option.goodsType}}</view>
					<view class="car_types" v-if="option.size != ''">{{option.size}}</view>
					<view class="car_types">{{option.carType}}</view>
					<!-- <view class="car_types" v-for="(type,index) in option.goodsFile" :key="index">
				  		{{type}}
				  	</view> -->
				</view>

				<view class="car_price">
					{{option.price}}
				</view>
				<view class="btn" @click.stop="qiang(option.id)">
					抢单
				</view>
				<image src="../../static/img/cha.png" mode="" class="cancel"></image>
			</view>

		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog title="" content="确认接单？" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		data() {
			return {
				selectItem: "car",
				carTypeList: [],
				active: 0,
				activeName: '全部',
				showType: false,
				carUseId:null,
				employList: [],
				carList: [],
				employListLen: 0,
				carListLen: 0,
				carListInfo: {
					page: 1,
					pageSize: 20,
					carType: 0
				},
				employListInfo: {
					page: 1,
					pageSize: 20,
				}
			}
		},
		components: {
			uniPopup,
			uniPopupDialog
		},
		created() {
			this.getCarType()
			this.getCarAcceptList()
			this.getJobList()
		},
		methods: {
			goDetail(id){
				uni.navigateTo({
					url:"/pages/receivingOrdersDetail/receivingOrdersDetail?id="+id
				})
			},
			goJobDetail(id){
				uni.navigateTo({
					url:"/pages/jobDetail/jobDetail?type=realtime&&id="+id
				})
			},
			//获取cartype
			getCarType() {
				let data = {}
				this.$utils.requert({
					url: 'carType',
					type: 'get',
					data: data
				}).then(res => {
					if (res.code === 1) {
						this.carTypeList = res.data
					} else {
						this.$utils.showLayer(res.message)
					}
				})
			},
			//获取用车接单列表
			getCarAcceptList(tag) {
				this.$utils.requert({
					url: 'carAcceptList',
					type: 'get',
					data: this.carListInfo,
				}).then(res => {
					if (res.code === 1) {
						this.carListLen = Math.ceil(res.data.total / this.carListInfo.pageSize)
						if(tag){
							this.carList = this.carList.concat(res.data.list)
						}else {
							this.carList = res.data.list
						}
					} else {
						this.$utils.showLayer(res.message)
					}
				})
			},
			//实施工单
			getJobList(tag) {
				let data = {
					carType: this.active,
					page: 1,
					pageSize: 10,
				}
				this.$utils.requert({
					url: 'timeOrderList',
					type: 'get',
					data: this.employListInfo,
				}).then(res => {
					if (res.code === 1) {
						this.employListLen = Math.ceil(res.data.total / this.employListInfo.pageSize)
						let datas = res.data.data
						if(tag){
							this.employList = this.employList.concat(datas)
						}else {
							this.employList = datas
						}
					} else {
						this.$utils.showLayer(res.message)
					}
				})
			},
			chooseSelect(index, id) {
				this.showType = false
				if (id == 0) {
					this.active = 0
					this.activeName = '全部'
				} else {
					this.active = id
					this.activeName = this.carTypeList[index].name
				}
				this.getCarAcceptList()
			},
			selectOne(value) {
				if (value == 'car') {
					this.showType = true
				} else {
					this.showType = false
				}
				this.selectItem = value;
			},
			qiang(id) {
				this.$refs.popup.open()
				this.carUseId = id
			},
			close(done) {
				done()
			},
			confirm(done,value){
				let data = {
					carUseId: this.carUseId,
				}
				this.$utils.requert({
					url: 'driverAccept',
					type: 'post',
					data: data
				}).then(res => {
					if (res.code === 1) {
						this.$utils.showLayer(res.message)
					} else {
						this.$utils.showLayer(res.message)
						this.$refs.popup.close()
					}
				})
			}

		},
		onPullDownRefresh(){ //下拉刷新
			this.employListInfo.page = 1
			this.carListInfo.page = 1
			this.getCarAcceptList()
			this.getJobList()
			uni.stopPullDownRefresh()
		},
		onReachBottom(){ //上垃加载
			if(this.carListInfo.page < this.carListLen) {
				this.carListInfo.page++
				this.getCarAcceptList(true)
			}
			if(this.employListInfo.page < this.employListLen) {
				this.employListInfo.page++
				this.getJobList(true)
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: calc(100vh - 88rpx + env(safe-area-inset-top));
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.employ_part {
		padding: 40rpx 0;
		border-bottom: 1rpx solid #f6f6f6;
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.employ_part .name {
		font-size: 31rpx;
		color: #323232;
	}

	.distance_address {
		font-size: 24rpx;
		color: #838282;
	}

	.employ_part .types {
		display: flex;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}

	.employ_part .types .type_item {
		padding: 0 8rpx;
		border: 1rpx solid #f6f6f6;
		font-size: 25rpx;
		color: #FB8408;
		margin-right: 16rpx;
	}

	.company_person {
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.company_person image {
		width: 42rpx;
		height: 42rpx;
		margin-right: 17rpx;
	}

	.right {
		text-align: right;
	}

	.right .money {
		font-size: 28rpx;
		color: #FB8408;
	}

	.go_rob {
		width: 137rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color: #Fff;
		background-color: #FFA008;
		font-size: 28rpx;
		position: absolute;
		bottom: 40rpx;
		right: 0;
		border-radius: 7rpx;
	}


	.top_title {
		display: flex;
		padding-top: 18rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f6f6f6;
		position: relative;

		.car-list-box {
			width: 100%;
			position: absolute;
			left: -26rpx;
			top: 60rpx;
			background-color: #fff;
			z-index: 9;
			padding: 4rpx 26rpx;
			font-size: 28rpx;
			color: #333333;
			border-top: 1rpx solid #F6F6F6;
			border-bottom: 1rpx solid #F6F6F6;
			-moz-box-shadow: 2rpx 2rpx 10rpx #888888;
			/* 老的 Firefox */
			box-shadow: 0rpx 6rpx 10rpx #888888;
			border-radius: 10rpx;

			.list {
				padding: 4rpx 0;
			}

			.list.active {
				color: #FB8408;
			}
		}
	}

	.top_title .name {
		margin-right: 40rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.top_title .active_name {
		font-size: 32rpx;
		color: #FB8408;
	}

	.arrow_down {
		width: 22rpx;
		height: 12rpx;
	}

	.car_list {
		padding: 40rpx 0;
		border-bottom: 1rpx solid #F6F6F6;
		position: relative;
	}

	.car_list .car_name {
		font-size: 32rpx;
		color: #323232;
		margin-bottom: 16rpx;
	}

	.car_list .car_time {
		font-size: 24rpx;
		color: #838282;
		margin-bottom: 34rpx;
	}

	.car_list .car_type_list {
		display: flex;
		font-size: 25rpx;
		color: #838282;
		margin-bottom: 34rpx;
	}

	.car_list .car_type_list .car_types {
		padding: 6rpx 8rpx;
		box-sizing: border-box;
		border: 1rpx solid #f6f6f6;
		margin-right: 15rpx;
	}

	.car_list .car_price {
		font-size: 38rpx;
		color: #FB8408;
	}

	.car_list .btn {
		width: 137rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color: #Fff;
		background-color: #FFA008;
		font-size: 28rpx;
		position: absolute;
		bottom: 40rpx;
		right: 0;
		border-radius: 7rpx;
	}

	.car_list .cancel {
		width: 14rpx;
		height: 14rpx;
		position: absolute;
		top: 60rpx;
		right: 0;
	}
</style>
